<!--
 * @Author: zhayang
 * @LastEditors: DeluxePig 250293786@qq.com
 * @Date: 2024-06-18 22:16:17
 * @LastEditTime: 2024-08-13 23:00:52
 * @Description:新增模型
-->
<template>
  <FormLayout title="新增模型">
    <template #step>
      <Step v-model="active" :options="options" disabled />
    </template>

    <div class="form-area fit overflow-hidden">
      <transition name="el-fade-in-linear">
        <el-form v-if="active === 0" key="step1" ref="firstForm" v-loading="loading" label-position="top"
          label-width="80px" class="fit" :rules="{
            title: {
              required: true,
              message: '请输入模型名称',
              trigger: 'blur'
            }
          }" :model="formState">
          <el-form-item label="模型名称" prop="title">
            <el-input v-model="formState.title" clearable size="medium" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="模型说明" prop="intro">
            <el-input v-model="formState.intro" type="textarea" clearable size="medium"
              :autosize="{ minRows: 2, maxRows: 6 }" placeholder="请输入" />
          </el-form-item>
        </el-form>
      </transition>
      <transition name="el-fade-in-linear">
        <TwoStep v-show="active === 1" key="step2" ref="TwoRef" :model-uniqueid="formState.model_uniqueid" />
      </transition>
      <transition name="el-fade-in-linear">
        <ThreeStep v-show="active === 2" key="step3" ref="ThreeRef" :cut-url="cutUrl"
          :model-uniqueid="formState.model_uniqueid" />
      </transition>
      <transition name="el-fade-in-linear">
        <FourStep v-show="active === 3" key="step4" ref="FourRef" :model-uniqueid="formState.model_uniqueid" />
      </transition>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="55%">
      您未设置视频模版（设置项未配置完全），后续步骤无法使用“一键生成”视频功能。确定跳过视频模版设置？
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">
          去设置
        </el-button>
        <el-button type="primary" size="small" @click="turnToThree">
          暂不设置
        </el-button>
      </span>
    </el-dialog>
    <template #footer>
      <el-button size="small" @click="back">
        返回列表
      </el-button>
      <el-button v-if="formState.model_uniqueid" size="small" :loading="loading" @click="temporarySave">
        暂存
      </el-button>
      <el-button v-if="active !== 0" type="primary" size="small" :loading="loading" @click="backPre">
        上一步
      </el-button>
      <el-button v-if="active !== options.length - 1" type="primary" size="small" :loading="loading" @click="next">
        下一步
      </el-button>
      <el-button v-if="active === options.length - 1" type="primary" size="small" :loading="loading" @click="save">
        保存
      </el-button>
    </template>
  </FormLayout>
</template>

<script>
import FormLayout from '@/components/bmp/layout/form-layout.vue'
import Step from '@/components/bmp/step.vue'
import TwoStep from './components/two-step.vue'
import ThreeStep from './components/three-step.vue'
import FourStep from './components/four-step.vue'
import { addModel, editModel, holdModel, modelDet } from '@/api/model'
import { Loading } from 'element-ui'
export default {
  components: {
    FormLayout,
    Step,
    TwoStep,
    ThreeStep,
    FourStep
  },
  data() {
    return {
      options: [
        {
          title: '基础信息',
          value: 1
        },
        {
          title: '视频模板',
          value: 2
        },
        {
          title: '文案和视频',
          value: 3
        },
        {
          title: '收费设置',
          value: 4
        }
      ],
      active: 0,
      formState: {
        model_uniqueid: '',
        title: '',
        intro: ''
      },
      cutUrl: '',
      loading: false,
      dialogVisible: false
    }
  },
  created() { },
  methods: {
    back() {
      this.$router.replace({
        path: 'model-list'
      })
    },
    // 上一步
    backPre() {
      if (this.active) {
        this.active--
      }
    },
    // 下一步
    next() {
      if (this.active === 0) {
        this.$refs.firstForm.validate((valid) => {
          if (valid) {
            this.loading = true
            const config = [addModel, editModel]
            const index = +!!this.formState.model_uniqueid
            config?.[index]({
              ...this.formState
            })
              .then((res) => {
                if (res.code === 0) {
                  index === 0 &&
                    (this.formState.model_uniqueid =
                      res.data?.model_uniqueid || '')
                  this.active++
                }
              })
              .catch(() => {
                this.$message.error('保存错误，请重试')
              })
              .finally(() => {
                this.loading = false
              })
          } else {
            this.$message.warning('请填写必填项！')
            return false
          }
        })
      } else if (this.active === 1) {
        const loadingInstance = Loading.service()
        this.$refs.TwoRef.finish()
          .then((res) => {
            if (res) {
              modelDet({ model_uniqueid: this.formState.model_uniqueid })
                .then((res) => {
                  if (res && res.code === 0) {
                    this.cutUrl = res?.data?.default_cut_bg_image
                  }
                })
                .finally(() => {
                  this.active = 2
                  this.$nextTick(() => {
                    loadingInstance.close()
                  })
                })
            }
          })
          .catch(() => {
            this.dialogVisible = true
          })
      } else if (this.active === 2) {
        this.active = 3
      }
    },
    turnToThree() {
      this.dialogVisible = false
      this.active = 2
    },
    // 暂存
    temporarySave() {
      let payload = ''
      if (this.active === 0) {
        payload = JSON.stringify(this.formState)
      }
      holdModel({
        payload: payload,
        option: 0,
        model_uniqueid: this.formState.model_uniqueid
      })
        .then((res) => {
          if (res.code === 0) {
            this.$message.success('暂存成功')
          }
        })
        .catch(() => {
          this.$message.error('暂存失败，请重试')
        })
    },
    // 保存
    save() {
      if (this.active === 3) {
        this.loading = true
        this.$refs.FourRef.submit()
          .then((res) => {
            const loadingInstance = Loading.service()
            editModel({
              ...res,
              ...this.formState,
              enable_status: 1
            })
              .then((data) => {
                if (data.code === 0) {
                  this.$message.success('保存成功，正在跳转模型列表...')
                  this.$router.replace({
                    path: 'model-list'
                  })
                }
              })
              .catch(() => {
                this.$message.error('保存错误，请重试')
              })
              .finally(() => {
                this.loading = false
                this.$nextTick(() => {
                  loadingInstance.close()
                })
              })
          })
          .finally(() => {
            this.loading = false
          })
      }
    }
  }
}
</script>
<style lang="scss" scoped></style>
